<%@page import="java.text.SimpleDateFormat"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!doctype html>
<html>
	<head>
		<title>礼物记录查询</title>
		<base href="<%=basePath%>" />
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="renderer" content="webkit">
		<meta http-equiv="Cache-Control" content="no-siteapp" />
		<link rel="stylesheet" href="layui/css/layui.css">
		<style type="text/css">
		</style>
	</head>

	<body>
	    <br/>
		<form class="layui-form" action="" onsubmit='return false;'>
			<div class="layui-form-item">
				<div class="layui-inline">
					<div class="layui-input-inline">
						<input type="text" name="UserId" id="UserId" placeholder="玩家ID" autocomplete="off" class="layui-input">
					</div>
				</div>
				
				<div class="layui-inline">
					<div class="layui-input-inline">
						<input type="text" class="layui-input" id="StartTime"
							placeholder="开始时间" lay-filter="startTime" name="startTime" autocomplete="off">
					</div>
				</div>
				<div class="layui-inline">
					<div class="layui-input-inline">
						<input type="text" class="layui-input" id="EndTime"
							placeholder="结束时间" lay-filter="endTime" name="endTime" autocomplete="off">
					</div>
				</div>
				<div class="layui-inline">
					<div class="layui-input-inline">
						<button class="layui-btn layui-btn-normal" data-type="reload" lay-filter="findID" id="findID">立即提交</button>
						<button type="reset" class="layui-btn layui-btn-primary">重置</button>
					</div>
				</div>
			</div>
		</form>
		<div class="layui-form" id="table-list">
			<table class="layui-table" lay-skin="nob" id="Gift" lay-filter="Gift"></table>
		</div>
        
		<script src="js/jquery.min.js"></script>
		<script src="layui/layui.js"></script>
		<script src="js/frame/form_upload.js"></script>
		<script src="js/frame/datagrid.js"></script>
		<script type="text/html" id="SenderBusinessman">
            {{# if (d.SenderBusinessman == 1) { }}
                <a class="layui-btn layui-btn-xs" lay-event="edit">商人</a>
            {{# } else {  }}
                <a class="layui-btn layui-btn-xs" lay-event="edit">玩家</a>
            {{# } }}
        </script>
        <script type="text/html" id="ReceiverBusinessman">
            {{# if (d.ReceiverBusinessman == 1) { }}
                <a class="layui-btn layui-btn-xs" lay-event="edit">商人</a>
            {{# } else {  }}
                <a class="layui-btn layui-btn-xs" lay-event="edit">玩家</a>
            {{# } }}
        </script>
        <script type="text/html" id="AfterCount">
            {{# d.AfterCount = d.OriginCount + d.Delta }}
                <span>{{ d.AfterCount }}</span>
            {{#  }}
        </script>
		<script>
			layui.use(['layer', 'form', 'table', 'laytpl','laydate'], function() {
				var layer = layui.layer,
					form = layui.form,
					table = layui.table,
					laytpl = layui.laytpl
					laydate = layui.laydate;

				layer.config({
					extend: 'MySkin/style.css'
				});

				//日期选择器
				laydate.render({
				    elem: '#StartTime'
				    ,type: 'datetime' 
				  });
				laydate.render({
					elem: '#EndTime'
					,type: 'datetime' 
				});
				
				//加个table表
				table.render({
					elem: '#Gift',
					url: 'gift/query',
					method: 'post',
					title: '礼物日志列表',
					totalRow: true,
					cellMinWidth: 50, //全局定义常规单元格的最小宽度，layui 2.2.1 新增
					id: 'AllTable',
					request: {
						pageName: 'PageIndex',
						limitName: 'PageCount'
					},
					where: {
						UserId: $('#UserId').val(),
						StartTime : $('#StartTime').val(),
						EndTime : $('#EndTime').val()
					},
					cols: [[
						{field: 'SenderUserId',title: '赠送者ID',style:'color:#f47920;'}, 
						{field: 'SenderNickname',title: '赠送者昵称'}, 
						{field: 'SenderBusinessman',title: '赠送者(商人/玩家)',templet:'#SenderBusinessman'},
						{field: 'ReceiverUserId',title: '接受者ID',style:'color:#cd9a5b;'}, 
						{field: 'ReceiverNickname',title: '接受者昵称'},
						{field: 'ReceiverBusinessman',title: '接受者(商人/玩家)',templet:'#ReceiverBusinessman'}, 
						{field: 'ItemName',title: '物品名称',style:'color:#f05b72;'},
						{field: 'OriginCount',title: '赠送前数量'},
						{field: 'Delta',title: '赠送数量'},
						{field: 'AfterCount',title: '赠送后数量',templet:'#AfterCount'},
						{field: 'CreateTime',title: '赠送时间',style:'color:#ed1941;'}
						]],
					page: true, //分页
					response: {
						statusCode: 200
						//重新规定成功的状态码为 200，table 组件默认为 0
					},
					parseData: function(res) { //将原始数据解析成 table 组件所规定的数据
						return {
							"code": res.status, //解析接口状态
							"msg": res.message, //解析提示文本
							"count": res.count, //解析数据长度
							"data": res.data //解析数据列表
							//解析数据列表
						};
					}
				});
				
				//根据条件查询表格数据重新加载
				var active = {
					reload: function() {
					//获取用户名
					//执行重载
					table.reload('AllTable', {page: {curr: 1},
						where:{
							UserId: $('#UserId').val(),
							StartTime : $('#StartTime').val(),
							EndTime : $('#EndTime').val()
						}});
					return false;
					}
				};
				//点击搜索按钮根据用户名称查询
				$('#findID').on('click',
					function() {
						var type = $(this).data('type');
						active[type] ? active[type].call(this) : '';
					});

                setInterval(function(){
                	table.reload('AllTable', {});
                },60000);
			});
		</script>
	</body>
</html>
